<template>
  <div class="search-wrapper">
    <div class="search-header">
      <span class="iconfont search-header-iconS" @click="handleSearch">&#xe82e;</span>
      <input type="text" placeholder="..." v-model="searchInputValue" @keyup.enter="handleSearch" @click="handleSearchInput" class="search-header-input">
      <span class="iconfont search-header-iconC" v-show="searchInput" @click="handleSearchClose">&#xe69a;</span>
    </div>
    <div class="search-list" v-show="searchInput">
       <div class="search-movie" v-for="item in this.searchMovieList" :key="item.id">
        <movie :groupMovie="item"></movie>
      </div>
    </div>
  </div>
</template>

<script>
import {getSearchMovie} from 'api/complex'
import Movie from './Movie'
export default {
  name: 'MoviesSearch',
  data () {
    return {
      searchInput: false,
      searchInputValue: '',
      searchMovieList: Object
    }
  },
  components: {
    Movie
  },
  methods: {
    handleSearchInput () {
      this.searchInput = true
    },
    handleSearchClose () {
      this.searchInput = false
      this.searchInputValue = ''
    },
    handleSearch () {
      getSearchMovie(this.searchInputValue).then((res) => {
        if (res.status === 200) {
          this.searchMovieList = res.data.subjects
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/variable"
  .search-wrapper
    background-color: $color-background-shallow
    .search-header
      display: flex
      width: 100%
      height: .8rem
      align-items: center
      .search-header-iconS
        margin: 0 .3rem
      .search-header-iconC
        margin: 0 .3rem
        font-size: .5rem
      .search-header-input
        height: 100%
        flex: 1
        padding: 0 .3rem
        background-color: $color-background-shallow
    .search-list
      display: flex
      flex-wrap: wrap
      position: absolute
      top: 1.7rem
      height: 104%
      width: 100%
      background-color: $color-background-shallow
      .search-movie
        width: 2.3rem
        padding: .15rem .2rem .2rem .15rem
</style>
